<template>
  <div id="chart"></div>
</template>

<script>
import { Graph } from '@antv/x6'



// 演示所有的内置节点
export default {
  name: 'Port',
  methods: {
    createGraph() {
      const graph = new Graph({
        container: document.getElementById('chart'),
        grid: true,
        width: window.innerWidth,
        height: window.innerHeight
      })
      graph.addNode({
        x: 240,
        y: 240,
        width: 120,
        height: 60,
        label: 'rect',
        attrs: {
          body: {
            stroke: 'orange',
            fill: '#eee',
            rx: 4, // 设置圆角
            ry: 8,
          },
          label: {
            refX: 0.5,
            refY: -4,
            textAnchor: 'start', // start / middle / end
            textVerticalAnchor: 'middle', // top / middle / bottom
          }
        }
      })
      graph.addNode({
        shape: 'ellipse',
        x: 180,
        y: 40,
        width: 120,
        height: 60,
        label: 'ellipse',
        attrs: {
          body: {
            stroke: 'orange',
            fill: '#eee',
            rx: 4, // 设置圆角
            ry: 8,
          },
          label: {
            refX: 0.5,
            refY: -4,
            textAnchor: 'middle', // start / middle / end
            textVerticalAnchor: 'middle', // top / middle / bottom
          }
        }
      })
      graph.addNode({
        shape: 'ellipse',
        x: 380,
        y: 40,
        width: 120,
        height: 60,
        label: 'circle',
        attrs: {
          body: {
            stroke: 'orange',
            fill: '#eee',
            rx: 4, // 设置圆角
            ry: 8,
          },
          label: {
            refX: 0.5,
            refY: -4,
            textAnchor: 'middle', // start / middle / end
            textVerticalAnchor: 'middle', // top / middle / bottom
          }
        }
      })
      graph.addNode({
        shape: 'path',
        x: 40, y: 120,
        width: 100,
        height: 80,
        path: 'M 0 5 10 0 C 20 0 20 20 10 20 L 0 15 Z',
        label: 'path',
        attrs: {
          body: {
            fill: '#efdbff',
            stroke: '#9254de',
          },
        }
      })
      graph.addNode({
        shape: 'polygon', // 和 polyline 配置类似 通过 points 来生成 图形
        x: 150, y: 120,
        width: 100,
        height: 80,
        points: [
          { x: 0, y: 10 },
          { x: 10, y: 0 },
          { x: 20, y: 10 },
          { x: 10, y: 20 },
        ],
        label: 'path',
        attrs: {
          body: {
            fill: '#efdbff',
            stroke: '#9254de',
          },
        }
      })

      graph.addNode({
        shape: 'cylinder', // 圆柱形
        x: 320,
        y: 120,
        width: 80,
        height: 120,
        label: 'cylinder',
        attrs: {
          top: {
            fill: 'pink',
            fillOpacity: 0.5,
          },
          body: {
            fill: '#ED8A19',
            fillOpacity: 0.8,
          },
        },
      })

      graph.addNode({
        shape: 'image',
        x: 320,
        y: 320,
        width: 94,
        height: 28,
        imageUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgs.aixifan.com%2Fo_1d3j352idlo31uvlmahquijai3q.png&refer=http%3A%2F%2Fimgs.aixifan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636015130&t=d73dc20bbcf3f7f62664f180d2e0b9c2'
      })

      graph.addNode({ // 文本框
        x: 160,
        y: 520,
        width: 360,
        height: 120,
        shape: 'text-block',
        text: `There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.`,
        attrs: {
          body: {
            fill: '#efdbff',
            stroke: '#9254de',
            rx: 4,
            ry: 4,
          },
        },
      })


    }
  },
  mounted() {
    this.createGraph()
  }
}
</script>

<style>

</style>